<template>
	<div class="menu">
		<div
			v-for="(item, index) in menu.tabsList"
			:key="item.name"
			class="menu-item"
			:class="activeMenu == item.path ? 'menu-active' : ''"
			@contextmenu.prevent="openMenu($event, item, index)"
			@click="goPage(item.path)"
		>
			<svg class="iconSymbol" aria-hidden="true">
				<use :xlink:href="item.meta?.icon"></use>
			</svg>
			<span class="title">{{ $t(item.meta!.title) }}</span>
			<el-icon v-if="!item.meta?.affix" class="close" @click.stop="menu.closeTabs(item.path, activeMenu)">
				<component :is="'Close'"></component>
			</el-icon>
		</div>
		<ul v-if="show" class="dropdown" :style="{ left: position.left + 'px', top: position.top + 'px' }">
			<li
				v-for="item in tabsMenu"
				:key="item.id"
				class="item"
				:class="isDisable(item.id)"
				@click="chooseMenu(isDisable(item.id) != '' ? -1 : item.id)"
			>
				<el-icon :size="14">
					<component :is="item.icon"></component>
				</el-icon>
				<span>{{ $t(item.title) }}</span>
			</li>
		</ul>
	</div>
</template>
<script setup lang="ts">
import { RefreshProvider } from '@/types/common';
import menuStore from '@/stores/menu';
import { tabsMenu } from '@/common/data';
import useContextMenu from '@/hooks/useContextMenu';
import { goPage } from '@/utils/skip';
const { show, position, openMenu, chooseValue, chooseIndex } = useContextMenu();
const menu = menuStore();
const route = useRoute();
const activeMenu = computed(() => route.path);
const reloadProvide = inject<RefreshProvider>('refresh');
/**
 * 监听路由变化
 */
watch(
	() => route.path,
	() => {
		route.meta.isKeepAlive && menu.addKeepAlive(route.name as string);
		menu.addTabs(route);
	},
	{ immediate: true }
);
const chooseMenu = (id: number) => {
	switch (id) {
		case 0:
			reloadProvide?.refreshPage();
			return;
		case 1:
			menu.closeTabs(chooseValue.value.path, activeMenu.value);
			return;
		case 2:
			menu.closeOther(chooseValue.value.path, activeMenu.value, chooseValue.value.name);
			return;
		case 3:
			menu.closeDirection(chooseValue.value.path, activeMenu.value, 'left');
			return;
		case 4:
			menu.closeDirection(chooseValue.value.path, activeMenu.value, 'right');
			return;
		case 5:
			menu.closeAll();
			return;
		case -1:
			return;
	}
};
/**
 * 判断是否禁用按钮
 * @param id 按钮唯一标识
 */
const isDisable = (id: number) => {
	if (chooseValue.value.path != activeMenu.value && id == 0) return 'disable';
	if (chooseValue.value.meta?.affix && id == 1) return 'disable';
	if (chooseIndex.value == 0 && id == 3) return 'disable';
	return '';
};
</script>
<style lang="scss" scoped>
.menu {
	height: 100%;
	display: flex;
	align-items: center;

	&-item {
		height: 100%;
		display: flex;
		align-items: center;
		padding: 0 8px;
		cursor: pointer;
		border-right: $borderStyle;
		color: $fontColor;

		.iconfont {
			font-size: 14px;
		}

		.title {
			font-size: 12px;
			margin-left: 5px;
			margin-right: 10px;
		}

		.close {
			width: 0px;
			height: 18px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			font-size: 12px;
			color: $fontColor;
		}

		.close:hover {
			color: #fff;
			background-color: $primaryColor;
		}
	}

	&-active {
		color: $primaryColor;
		background-color: $primaryColorLight;
	}

	&-item:nth-child(1) {
		border-left: $borderStyle;
	}

	&-item:hover {
		color: $fontColor;
		background-color: $backgroundHover;

		.close {
			animation: animate-width 0.3s linear forwards;
		}
	}

	@keyframes animate-width {
		from {
			width: 0px;
		}

		to {
			width: 18px;
		}
	}
}

.dropdown {
	background: $backgroundColor;
	position: fixed;
	list-style-type: none;
	border-radius: 4px;
	box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
	z-index: 999;

	.item {
		width: 100%;
		height: 38px;
		font-size: 12px;
		font-weight: 400;
		color: $fontColor;
		cursor: pointer;
		display: flex;
		align-items: center;
		padding: 0 14px;
		box-sizing: border-box;

		span {
			font-size: 13px;
			margin-left: 10px;
		}
	}

	.disable {
		color: #cfcfd0;
		cursor: not-allowed;
	}

	.disable:hover {
		background: none !important;
	}

	.item:hover {
		background: $backgroundHover;
	}
}
</style>
